<template>
  <div>
    <div ref="content" class="chat-content" v-html="html"></div>
    <div class="test" :style="`--top: ${top};--left: ${left}`"></div>
  </div>
</template>

<script>
import { Marked } from "marked";
import { markedHighlight } from "marked-highlight";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";
export default {
  name: "chatContent",

  props: {
    markdown: {
      type: String,
      default: "",
    },
  },

  computed: {
    html() {
      this.md += this.markdown;
      return this.mdToHtml();
    },
  },

  data() {
    return {
      md: "",
      top: 0,
      left: 0,
    };
  },

  mounted() {},

  methods: {
    mdToHtml() {
      const marked = new Marked(
        markedHighlight({
          langPrefix: "hljs language-",
          highlight(code, lang) {
            const language = hljs.getLanguage(lang) ? lang : "plaintext";
            return hljs.highlight(code, { language }).value;
          },
        })
      );
      setTimeout(() => {
        this.addCoucor();
      }, 0);
      return marked.parse(this.md + `<span class='loading'></span>`);
    },

    addCoucor() {
      this.$nextTick(() => {
        let con = this.$refs.content;
        let loading = con.querySelectorAll(".loading")[0];
        const rect = loading.getBoundingClientRect();
        const top = rect.top + window.scrollY;
        const left = rect.left + window.scrollX;
        this.top = top + 4 + "px";
        this.left = left + 5 + "px";
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chat-content {
  width: 100%;
  height: 100%;
}

.test {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007bff;
  border: 1px solid transparent;
  box-sizing: border-box;
  animation: loading 1s infinite;
}

@keyframes loading {
  0% {
    left: var(--left);
    top: var(--top);
    width: 16px;
    height: 16px;
    background: #6eb6ff;
    border: 1px solid transparent;
  }

  50% {
    left: calc(var(--left) + 2px);
    top: calc(var(--top) + 2px);
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #007bff;
  }

  100% {
    left: var(--left);
    top: var(--top);
    width: 16px;
    height: 16px;
    background: #6eb6ff;
    border: 1px solid transparent;
  }
}
</style>
